'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import UserMenu from '@/components/Menu/UserMenu';
import LoginModal from '@/components/LoginModal/LoginModal';
import './Navbar.css';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { useAuth } from '@/hooks/contexts/AuthContext';

export default function Navbar() {
    // 控制移动端菜单的展开/收起状态
    const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);

    // 记录页面滚动状态，用于动态改变导航栏样式
    const [scrolled, setScrolled] = useState<boolean>(false);

    // 判断当前设备是否为移动端
    const [isMobile, setIsMobile] = useState<boolean>(false);

    // 用户登录状态
    const { isLoggedIn, logout, login, phoneLogin } = useAuth();

    // 控制登录弹窗的显示与隐藏
    const [showLoginModal, setShowLoginModal] = useState<boolean>(false);

    // 监听滚动事件，控制导航栏样式
    useEffect(() => {
        const handleScroll = () => {
            setScrolled(window.scrollY > 50);
        };
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    // 监听屏幕尺寸，判断是否为移动端
    useEffect(() => {
        const checkMobile = () => setIsMobile(window.innerWidth <= 768);
        checkMobile(); // 初始化
        window.addEventListener('resize', checkMobile);
        return () => window.removeEventListener('resize', checkMobile);
    }, []);

    // 关闭菜单
    const closeMenu = () => setIsMenuOpen(false);

    // 打开登录弹窗
    const openLoginModal = () => {
        setShowLoginModal(true);
        document.body.style.overflow = 'hidden';
    };

    // 关闭登录弹窗
    const closeLoginModal = () => {
        setShowLoginModal(false);
        document.body.style.overflow = 'auto';
    };

    // 处理退出登录
    const handleLogout = () => {
        logout();
    };

    return (
        <>
            <header
                id="navbar"
                className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
                    scrolled ? 'bg-dark/90 backdrop-blur-sm shadow-md' : ''
                }`}
            >
                <div className="container">
                    {/* 品牌Logo链接 */}
                    <Link href="/" className="logo-link">
                        <span>稳网</span>互联
                    </Link>

                    {/* 导航链接容器 */}
                    <nav className="nav-links">
                        {/* 桌面端导航链接 */}
                        {!isMobile && (
                            <>
                                <Link href="/">首页</Link>
                                <Link href="/product">产品</Link>
                                <Link href="#">服务</Link>
                                <Link href="#">关于我们</Link>
                                <Link href="#">联系</Link>
                            </>
                        )}

                        {/* 桌面端用户菜单 */}
                        {!isMobile && (
                            <div className="usermenu">
                                {isLoggedIn ? (
                                    <UserMenu onLogout={handleLogout} />
                                ) : (
                                    <button
                                        type="button"
                                        className="register"
                                        onClick={openLoginModal}
                                        aria-label="登录"
                                    >
                                        登录
                                    </button>
                                )}
                            </div>
                        )}

                        {/* 移动端菜单按钮 */}
                        <button
                            className="mobile-menu-btn"
                            onClick={() => setIsMenuOpen(true)}
                            aria-label="打开菜单"
                        >
                            <i className="fa fa-bars"></i>
                        </button>
                    </nav>
                </div>

                {/* 移动端菜单 */}
                <div className={`mobile-menu ${isMenuOpen ? 'active' : ''}`}>
                    <button
                        className="close-menu-btn"
                        onClick={closeMenu}
                        aria-label="关闭菜单"
                    >
                        <i className="fa fa-times"></i>
                    </button>

                    <nav className="mobile-menu-links">
                        <Link href="#" onClick={closeMenu}>首页</Link>
                        <Link href="#" onClick={closeMenu}>产品</Link>
                        <Link href="#" onClick={closeMenu}>服务</Link>
                        <Link href="#" onClick={closeMenu}>关于我们</Link>
                        <Link href="#" onClick={closeMenu}>联系</Link>

                        {/* 移动端登录按钮 */}
                        <button
                            className="mobile-login-btn"
                            onClick={() => {
                                closeMenu();
                                openLoginModal();
                            }}
                            aria-label="登录/个人中心"
                        >
                            <i className="fa fa-user-circle mr-2"></i>登录/个人中心
                        </button>
                    </nav>
                </div>
            </header>

            {/* 引入封装好的登录弹窗组件 */}
            <LoginModal
                visible={showLoginModal}
                onClose={closeLoginModal}
                login={login}
                phoneLogin={phoneLogin}
            />

            <ToastContainer />
        </>
    );
}
